//
var Box = document.getElementById('Carousel');

// Box
var Img_Box = document.createElement('viod-box');
var Control_Box = document.createElement('viod-box');
var Text_Box = document.createElement('viod-box');

// Img_Box
var Img_A = document.createElement('img');
var Img_B = document.createElement('img');
var Img_C = document.createElement('img');
var Img_D = document.createElement('img');
var Img_E = document.createElement('img');

// Img_Box
Img_A.src = "https://t.alcy.cc/moe";
Img_B.src = "https://www.dmoe.cc/random.php";
Img_C.src = "https://img.paulzzh.com/touhou/random";
Img_D.src = "https://api.mtyqx.cn/tapi/random.php";
Img_E.src = "https://t.alcy.cc/ycy";

// Img_Box
Img_A.className = "Carousel_img";
Img_B.className = "Carousel_img";
Img_C.className = "Carousel_img";
Img_D.className = "Carousel_img";
Img_E.className = "Carousel_img";

// Control_Box
var Indicate_Box = document.createElement('viod-box');
var Button_Box = document.createElement('viod-box');

//
Indicate_Box.className = "Indicate_Box";
Button_Box.className = "Button_Box";

// Indicate_Box
var Indicate_A = document.createElement('viod-box');
var Indicate_B = document.createElement('viod-box');
var Indicate_C = document.createElement('viod-box');
var Indicate_D = document.createElement('viod-box');
var Indicate_E = document.createElement('viod-box');

// Indicate_Box
Indicate_A.className = "Indicate";
Indicate_B.className = "Indicate";
Indicate_C.className = "Indicate";
Indicate_D.className = "Indicate";
Indicate_E.className = "Indicate";

// Indicate_Box
Indicate_A.innerText = "•";
Indicate_B.innerText = "•";
Indicate_C.innerText = "•";
Indicate_D.innerText = "•";
Indicate_E.innerText = "•";

// Button_Box
var Left_Button = document.createElement('viod-box');
var Right_Button = document.createElement('viod-box');

// Button_Box
Left_Button.className = "Carousel_Button";
Right_Button.className = "Carousel_Button";

// Button_Box
Left_Button.innerText = "<";
Right_Button.innerText = ">";

// Box
Img_Box.className = "Carousel_Img_Box";
Control_Box.className = "Carousel_Control_Box";
Text_Box.className = "Carousel_Text_Box";

// Text_Box
var Text_A = document.createElement('viod-box');
var Text_B = document.createElement('viod-box');
var Text_C = document.createElement('viod-box');
var Text_D = document.createElement('viod-box');
var Text_E = document.createElement('viod-box');

// Text_Box
Text_A.className = "Carousel_Indicate";
Text_B.className = "Carousel_Indicate";
Text_C.className = "Carousel_Indicate";
Text_D.className = "Carousel_Indicate";
Text_E.className = "Carousel_Indicate";

//
Text_A.innerText = "11111";
Text_B.innerText = "22222";
Text_C.innerText = "33333";
Text_D.innerText = "44444";
Text_E.innerText = "55555";

//
Text_Box.appendChild(Text_A);
Text_Box.appendChild(Text_B);
Text_Box.appendChild(Text_C);
Text_Box.appendChild(Text_D);
Text_Box.appendChild(Text_E);

//
Box.appendChild(Img_Box);
Box.appendChild(Control_Box);
Box.appendChild(Text_Box);

//
Img_Box.appendChild(Img_A);
Img_Box.appendChild(Img_B);
Img_Box.appendChild(Img_C);
Img_Box.appendChild(Img_D);
Img_Box.appendChild(Img_E);

//
Control_Box.appendChild(Indicate_Box);
Control_Box.appendChild(Button_Box);

//
Indicate_Box.appendChild(Indicate_A);
Indicate_Box.appendChild(Indicate_B);
Indicate_Box.appendChild(Indicate_C);
Indicate_Box.appendChild(Indicate_D);
Indicate_Box.appendChild(Indicate_E);

//
Button_Box.appendChild(Left_Button);
Button_Box.appendChild(Right_Button);

// 自动轮播：
var img_Number = 5;
function Swiper(IO){
    if(IO == true){
        Img_B.style.display = "none";
        Img_C.style.display = "none";
        Img_D.style.display = "none";
        Img_E.style.display = "none";

        Text_C.style.display = "none";
        Text_B.style.display = "none";
        Text_E.style.display = "none";
        Text_D.style.display = "none";
    }else if(IO == false){
        if(Img_B.style.display != "none" & img_Number%5 == 1){
            Img_A.style.display = "none";
            Img_B.style.display = "none";
            Img_D.style.display = "none";
            Img_E.style.display = "none";
            Img_C.style.display = "block";

            Indicate_A.style.color = "#ffffff56";
            Indicate_B.style.color = "#ffffff56";
            Indicate_E.style.color = "#ffffff56";
            Indicate_D.style.color = "#ffffff56";
            Indicate_C.style.color = "#ffffffff";

            Text_A.style.display = "none";
            Text_B.style.display = "none";
            Text_E.style.display = "none";
            Text_D.style.display = "none";
            Text_C.style.display = "block";

            img_Number ++;
        }else if(Img_C.style.display != "none" & img_Number%5 == 2){
            Img_B.style.display = "none";
            Img_C.style.display = "none";
            Img_A.style.display = "none";
            Img_E.style.display = "none";
            Img_D.style.display = "block";

            Indicate_A.style.color = "#ffffff56";
            Indicate_B.style.color = "#ffffff56";
            Indicate_E.style.color = "#ffffff56";
            Indicate_C.style.color = "#ffffff56";
            Indicate_D.style.color = "#ffffffff";

            Text_A.style.display = "none";
            Text_B.style.display = "none";
            Text_E.style.display = "none";
            Text_C.style.display = "none";
            Text_D.style.display = "block";

            img_Number ++;
        }else if(Img_D.style.display != "none" & img_Number%5 == 3){
            Img_B.style.display = "none";
            Img_C.style.display = "none";
            Img_D.style.display = "none";
            Img_A.style.display = "none";
            Img_E.style.display = "block";

            Indicate_A.style.color = "#ffffff56";
            Indicate_B.style.color = "#ffffff56";
            Indicate_C.style.color = "#ffffff56";
            Indicate_D.style.color = "#ffffff56";
            Indicate_E.style.color = "#ffffffff";

            Text_A.style.display = "none";
            Text_B.style.display = "none";
            Text_C.style.display = "none";
            Text_D.style.display = "none";
            Text_E.style.display = "block";

            img_Number ++;
        }else if(Img_E.style.display != "none" & img_Number%5 == 4){
            Img_B.style.display = "none";
            Img_C.style.display = "none";
            Img_D.style.display = "none";
            Img_E.style.display = "none";
            Img_A.style.display = "block";

            Indicate_C.style.color = "#ffffff56";
            Indicate_B.style.color = "#ffffff56";
            Indicate_E.style.color = "#ffffff56";
            Indicate_D.style.color = "#ffffff56";
            Indicate_A.style.color = "#ffffffff";

            Text_C.style.display = "none";
            Text_B.style.display = "none";
            Text_E.style.display = "none";
            Text_D.style.display = "none";
            Text_A.style.display = "block";

            img_Number ++;
        }else if(Img_A.style.display != "none" & img_Number%5 == 0){
            Img_A.style.display = "none";
            Img_C.style.display = "none";
            Img_D.style.display = "none";
            Img_E.style.display = "none";
            Img_B.style.display = "block";

            Indicate_A.style.color = "#ffffff56";
            Indicate_C.style.color = "#ffffff56";
            Indicate_E.style.color = "#ffffff56";
            Indicate_D.style.color = "#ffffff56";
            Indicate_B.style.color = "#ffffffff";

            Text_A.style.display = "none";
            Text_C.style.display = "none";
            Text_E.style.display = "none";
            Text_D.style.display = "none";
            Text_B.style.display = "block";

            img_Number ++;
        }
    }
}
Swiper(true);
const Auto = setInterval(() => {
  Swiper(false);
}, 5000);

Left_Button.addEventListener('click', function(){
  img_Number --;
  Swiper(false);
});
Right_Button.addEventListener('click', function(){
  img_Number ++;
  Swiper(false);
});